<template>
  <el-card class="user-container">
    <div slot="header">
      <h2>编辑页面</h2>
    </div>
    <div class="fun-btn">
      <!-- 返回按钮 -->
      <el-button
        type="primary"
        @click="$router.push('/admin/users')"
        icon="el-icon-back"
      >
        返回
      </el-button>
    </div>
    <div class="user-info-box">
      <div class="avatar info-item">
        <el-avatar :size="100" :src="userInfo.avatar || defaultAvatar">
        </el-avatar>
      </div>
      <div class="info-details">
        <div class="info-item">
          <strong>用户名：</strong> {{ userInfo.username }}
        </div>
        <div class="info-item">
          <strong>邮箱：</strong> {{ userInfo.email }}
        </div>
        <div class="info-item">
          <strong>注册时间：</strong> {{ userInfo.created_at }}
        </div>
        <div class="info-item">
          <strong>角色：</strong>
          <el-tag :type="userInfo.role === 'admin' ? 'danger' : 'success'">
            {{ userInfo.role === "admin" ? "管理员" : "普通用户" }}
          </el-tag>
        </div>
        <div class="info-item" v-if="userInfo.bio">
          <strong>个人简介：</strong> {{ userInfo.bio }}
        </div>
        <div class="action-buttons">
          <el-button
            @click="$router.push(`/user/${targetUserId}/edit`)"
            v-if="isEdit"
            >编辑资料
          </el-button>
          <el-button
            v-if="isCurrentUser"
            type="primary"
            @click="$router.push('/profile/change-password')"
            >修改密码</el-button
          >
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
  export default {
    name: "UserDetail",
    data() {
      return {
        defaultAvatar: "https://picsum.photos/200/200?random=1",
        userInfo: {},
        isCurrentUser: false,
        isEdit: false,
      };
    },
    computed: {
      user() {
        return this.$store.getters.user;
      },
      isAdmin() {
        return this.$store.getters.isAdmin;
      },
      targetUserId() {
        return this.$route.params.id;
      },
    },
    created() {
      this.getUserInfo();
    },
    mounted() {
      this.isCurrentUser = this.user.id == this.targetUserId;
    },
    methods: {
      async getUserInfo() {
        // const targetUserId = this.$route.params.id;
        const user = await this.$axios.get("/user/" + this.targetUserId);
        this.userInfo = user.data;
        if (this.userInfo.username === "admin") {
          this.isEdit = false;
        } else {
          this.isEdit = true;
        }
      },
    },
  };
</script>

<style>
  .user-container {
    max-width: 1200px;
    margin: 0 auto;
  }
  .user-info-box {
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .info-item {
    margin: 10px 0;
  }
  .action-buttons {
    margin: 30px 0;
  }
</style>
